<template>
  <!-- 商品列表 -->
  <div>
    <!-- 头部 -->
    <el-space>
      <el-input v-model.trim="input.title" placeholder="请输入商品名称" />
      <el-input v-model.trim="input.barcode" placeholder="请输入商品条形码" />
      <el-select v-model="input.status" placeholder="选择商品状态">
        <el-option label="未售" value="0" />
        <el-option label="在售" value="1" />
        <el-option label="全部" value />
      </el-select>
      <el-cascader v-model="input.categoryId" :options="typeData" :props="props" placeholder="选择类目" />
      <el-button type="primary" @click="sous(input)">
        <span class="iconfont icon-icon-sousuo" style="margin-right: 10px"></span>查找
      </el-button>

      <!-- 添加对话框 -->
      <el-button type="text">
        <el-button type="primary" @click="addtan">
          <span class="iconfont icon-icon-B-tianjiabiji" style="margin-right: 10px"></span>添加
        </el-button>
      </el-button>
    </el-space>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="selection" align="center" />
      <!-- 详细 -->
      <el-table-column type="expand" label="Sku信息" width="55" align="center">
        <template #default="props">
          <el-table :data="props.row.skuList" border style="width: 100%">
            <el-table-column prop="barCode" label="商品条码" />
            <el-table-column prop="title" label="商品规格" />
            <el-table-column prop="stock" label="商品库存" />
            <el-table-column prop="originalPrice" label="原价" />
            <el-table-column prop="price" label="现价" />
            <el-table-column prop="vipPrice" label="VIP价格" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="商品ID" prop="id" align="center" />
      <el-table-column label="名称" prop="title" align="center" />
      <el-table-column label="图片" align="center">
        <template #default="scope">
          <img :src="scope.row.img" style="width:30px;" />
        </template>
      </el-table-column>
      <el-table-column label="商品详细介绍" prop="spuId" align="center">
        <template #default="scope">
          <el-button type="primary" @click="lock(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="类目ID" prop="categoryId" align="center" />
      <el-table-column label="邮费模板ID" prop="freightTemplateId" align="center" />
      <el-table-column label="销量" prop="sales" align="center" />
      <el-table-column label="单位" prop="unit" align="center" />
      <el-table-column label="是否在售" align="center">
        <template #default="scope">
          <el-tag :type="scope.row.status?'success':'info'">{{ scope.row.status==1?'在售':'未售' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="description" align="center" />
      <el-table-column label="操作" align="center" width="135">
        <template #default="scope">
          <!-- 修改按钮 -->
          <el-button size="small" type="primary" @click="amendnew(scope.$index, scope.row)">修改</el-button>
          <el-button size="small" :disabled="scope.row.status == -1" :type="scope.row.status ? 'warning' : 'success'" @click="editStatus(scope.row)">{{scope.row.status == 1? "下架": "上架"}}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 查看 -->
    <el-dialog v-model="dialogVisible" title="商品详情" width="1100px" :before-close="handleClose">
      <div v-html="details" />
    </el-dialog>

    <!-- 分页 -->
    <paging-vue v-bind="index" @limits="limitv" @pages="pagev"></paging-vue>
  </div>
</template>

<script>
import { post, get } from '@/utils/http.js' // 引入封装工具

export default {
  data() {
    return {
      index: {
        page: 1, // 分页
        limit: 10, // 每页显示条数
        total: 10 // 总数
      },
      // 输入框
      input: {
        categoryId: '',//类目
        title: '',//商品的名称
        status: '',//商品的状态
        barcode: '',//商品条形码
      },
      // 弹框数据
      addr: {
        id: '',//团购商品的ID
        minNum: '', // 团购最低人数
        spuId: "",//关联值
        days: "",
        dayss: "",
        automaticRefund: "",//团购人数未满是否自动退款
      },
      tableData: [], // 数据
      // 关联类目数据
      typeData: [],
      details: "",//查看数据
      // Cascader 级联选择器配置信息
      props: {
        value: "value",
        label: "label",
        children: "children",
        emitPath: false
      },
      // 对话框
      dialogVisible: false,//查看显示/隐藏
    }
  },

  created() {
    this.record() // 调用管理者数据接口
    this.getSpuBigTrees() //调用类目
  },

  methods: {
    // 查看
    lock(row) {
      this.dialogVisible = true
      const data = {
        _gp: 'admin.product', // 请求参数
        _mt: 'detail', // 请求参数
        spuId: row.id,//商品的ID
      }
      get(data).then((res) => {
        if (200 == res.data.errno) {
          this.details = res.data.data.detail
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },
    // 数据
    record() {
      const data = {
        _gp: 'admin.product', // 请求参数
        _mt: 'list', // 请求参数
        categoryId: this.input.categoryId,//搜索分类
        title: this.input.title,//商品的标题
        barcode: this.input.barcode,//商品条形码
        status: this.input.status,//商品的状态
        page: this.index.page,
        limit: this.index.limit
      }
      get(data).then((res) => {
        console.log(res);
        if (res.data.errno == 200) {
          this.tableData = res.data.data.items // 数据
          this.index.total = res.data.data.total // 分页总数
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },

    // 激活冻结
    editStatus(row) {
      const data = {
        _gp: "admin.product", // 请求参数
        _mt: "freezeOrActivation", // 请求参数
        spuId: row.id, // 信息
        status: row.status ? 0 : 1, // 状态
      };
      post(data).then((res) => {
        if (200 == res.data.errno) {
          if (row.status === 1) {
            ElMessage.success("上架成功");
          } else {
            ElMessage.error("下架成功");
          }
          this.record();
        } else {
          ElMessage.error(res.data.errmsg);
          this.record();
        }
      });
    },

    // 添加弹框
    addtan() {
      this.$router.push('/bcommodity/ListMulti/listAdd')
    },

    // 详情数据
    spuId(row) {
      const data = {
        _gp: 'admin.product', // 请求参数
        _mt: 'detail', // 请求参数
        spuId: row,//团购商品的ID
      }
      get(data).then((res) => {
        if (res.data.errno == 200) {
          this.tableData = res.data.data.items // 数据
          this.index.total = res.data.data.total // 分页总数
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },
    // 搜索
    sous() {
      this.record() // 调用数据接口
    },


    // 类目
    getSpuBigTrees() {
      let data = {
        _gp: "admin.product",
        _mt: "getSpuBigTree",
      }
      post(data).then(res => {
        let { data } = res.data
        this.typeData = data
      })
    },

    // 修改
    amendnew(index, row) {
      let id = row.id
      this.$router.push({ path: '/bcommodity/ListMulti/listEdite', query: { id } })

    },
    // 编辑提交
    edit() {
      // 输入判断
      if (!this.verify()) {
        return false
      }
      const data = {
        _gp: 'admin.user', // 请求参数
        _mt: 'edit', // 请求参数
        user: JSON.stringify({ ...this.addr })
      }
      post(data).then((res) => {
        if (res.data.errno == 200) {
          ElMessage.success('修改成功')
          this.drawer = false
          this.record()
        } else {
          ElMessage.error(res.data.errmsg)
        }
      })
    },


    // 取消
    resetForm() {
      ElMessage({
        type: 'info',
        message: '取消操作！'
      })
      this.dialogVisible = false
    },

    // 弹框
    handleClose(done) {
      ElMessage({
        type: 'info',
        message: '取消操作！'
      })
        ; (this.dialogVisible = false)
    },

    // 分页
    limitv(e) {
      this.index.limit = e
      this.record()
    },
    pagev(e) {
      this.index.page = e
      this.record()
    },

  }
}
</script>

<style lang="less" scoped>
// 输入框
.el-input {
  width: 200px;
}

// 盒子阴影
.box {
  padding: 15px;
  box-shadow: 0px 0px 15px 5px #ccc;
}
</style>
